<template>
  <div class="inlet">
    <ClientOnly>
      <van-floating-bubble
        v-model:offset="curOffset"
        :axis="props.axis"
        magnetic="x"
        :gap="8"
        style="background: transparent; overflow: initial"
        :style="{
          width: `${props.width}px`,
          height: `${props.height}px`,
        }"
      >
        <div
          class="arousalUser items-center"
          :style="{
            'min-width': `${props.width}px`,
            'min-height': `${props.height + 10}px`,
          }"
          @click="jumpPage()"
        >
          <Vue3Lottie
            :width="props.width - 10"
            :height="props.height - 10"
            :animationLink="file.arousalUser"
            :autoPlay="true"
          />
          <div class="arousalUser-btn">
            <div class="arousalUser-btn-text">{{ t("mvp.other.rjl7") }}</div>
            <!-- <img
              class="arousalUser-btn-icon"
              src="/lottie/arousalUser/hhdhbtn.svg"
            /> -->
          </div>
        </div>
      </van-floating-bubble>
    </ClientOnly>
  </div>
</template>
<script setup lang="ts" name="inlet">
import { getOssFileUrl, navigateI18nTo } from "@/utils";
const { t } = useI18n();
const props = withDefaults(
  defineProps<{
    offset: any;
    width?: number;
    height?: number;
    firebaseType?: string;
    axis?: string;
  }>(),
  {
    offset: { x: 200, y: 500 },
    width: 110,
    height: 100,
    axis: "xy",
  }
);

// 资源
const file = getOssFileUrl({
  arousalUser: "/lottie/arousalUser/arousalUser.json",
});
const curOffset = ref({ x: 200, y: 500 });
// firebase埋点
let firebase: any;
onMounted(() => {
  curOffset.value = props.offset;
  // 初始化firebase
  firebase = useInitFirebase();
});

const jumpPage = async () => {
  if (props.firebaseType) {
    if (props.firebaseType == "mining") {
      firebase &&
        firebase?.logEvent("BDC_H5_Mining_Arousal_Click", {
          time: Date.now(),
        });
    } else if (props.firebaseType == "coin") {
      firebase &&
        firebase?.logEvent("BDC_H5_Coin_Arousal_Click", {
          time: Date.now(),
        });
    }
  }

  await navigateI18nTo({ path: "/arousal-user" });
};
</script>
<style scoped lang="scss">
.arousalUser {
  position: relative;
  justify-content: center;
  flex-direction: column;

  &-btn {
    position: absolute;
    bottom: 0 * 2px;
    background: linear-gradient(270deg, #ff5a00 0%, #ff7a00 100%);
    border: 3px solid #ffb800;
    border-radius: 100px;
    padding: 2px 10px;
    max-height: 26 * 2px;
    min-width: 92 * 2px;
    &-text {
      color: #fff;
      text-align: center;
      font-size: 10 * 2px;
      font-style: italic;
      font-weight: 858;
      // line-height: normal;
      letter-spacing: -0.2px;
    }
  }
}
.inlet {
}
</style>
